@charset "utf-8";
@charset "GBK";
@import "reset";
@import "common";
@import "Animate";

//
body{
    width: 100%;
}

section{
    width: 1366px;
    margin: 0 auto;
    padding-bottom: 103px;
}

//衣服单元
.indexcell{
    width: 190px;
//  display: none;
//  transform: scale(0);
    transform: scale3d(0, 0, 0);
//  height: 224px;
    border: 1px solid $basecolor;
//  margin-right: 9px;
    margin{
        top: 4px;
        right: 9px;
    }
//  background-color: black;
//  margin-top: 4px;
    transition: box-shadow 0.8s;
    padding-bottom: 4px;
    float: left;
    &:hover{
//      box-shadow: 5px 5px 12px black;
//      transition: box-shadow 0.8s;
//      z-index: 99;
    }
    
    
    &:hover .img-w img{
        transform: scale(1.1);
        transition: transform 0.8s;
    }
    
    &:nth-of-type(3n){
        margin-right: 0;
    }
    &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){
        margin-top: 0;
    }
    .img-w{
        width: 190px;
        height: 174px;
        overflow: hidden;
        img{
            width: 190px;
            height: 174px;
            transition: transform 0.8s;
            transform: sscale(1);
        }
    }
    
    p:nth-of-type(1){
        height: 15px;
        width: 181px;
        padding-left: 9px;
        font-size: 15px;
        color: $fontcolor;
    }
    .cellbtm{
//      text-align: center;
        margin-top: 10px;
        
        font-size: 0;
        span{
            width: 169px;
            height: 20px;
            padding-left: 9px;
            padding-right: 12px;
            font-size: 11px;
        }
        
       
            .nowmake{
                width: 83px;
                height: 20px;
                background-color: black;
                color: white;
                text-align: center;
//              vertical-align: 0px;
//              height: 11px;
                line-height: 20px;
                float: right;
                font-size: 11px;
                border-radius: 10px;
                display: inline-block;
                margin-right: 12px;
                img{
                    width: 11px;
                    height: 11px;
                    vertical-align: -1px;
                }
            }
        
    }
    
    
}
//衣服单元结束

.indexcell1{
    animation-duration: 2s;
    animation-delay: 5s;
    display: block;
    animation-fill-mode: forwards;
}
.indexcell2{
    animation-duration: 2s;
    animation-delay: 5.5s;
    display: block;
    animation-fill-mode: forwards;
    
}
.indexcell3{
    animation-duration: 2s;
    animation-delay: 6s;
    display: block;
    animation-fill-mode: forwards;
}
.indexcell4{
    animation-duration: 2s;
    animation-delay: 6.5s;
    display: block;
    animation-fill-mode: forwards;
}
.indexcell5{
    animation-duration: 2s;
    animation-delay: 7s;
    display: block;
    animation-fill-mode: forwards;
}
.indexcell6{
    animation-duration: 2s;
    animation-delay: 7.5s;
    display: block;
    animation-fill-mode: forwards;
}




.banner{
    width: 100%;
//  height: 567px;
//  background-color: black;
    border-top: 1px solid $basecolor;
//  上部
    .banner-warp{
        img{
            width: 1366px;
            height: 470px;
            
       
        }
    }
//  底部
    .banner-bottom{
        width: 999px;
//      height: 92px;
        margin: 5px auto 0 auto;
//      background-color: black;
//      切换小图
        .bannercell{
           margin-right: 4px;
           position:relative; 
           width: 196px;
           &:nth-of-type(5){
               margin-right: 0;
               
           }
           img{
               width: 196px;
               height: 92px;
           }
            
            
        }
        .mask::after{
            content: "";
            display: block;
            position: absolute;
            width: 196px;
            height: 92px;
            left: 0;
            top: 0;
            background-color: black;
            opacity: 0.5;
        }
        .mask:hover::after{
            content: "";
            display: none;
        }
    }
}

.title{
        height: 20px;
        width: 100%;
        font-size: 20px;
        color: $fontcolor;
        text-align: center;
        position: relative;
        &:after{
            content: "";
            display: block;
            position: absolute;
            top: 32px;
            left: 488px;
            height: 3px;
            width: 25px;
            background-color: red;
        }
    }
//产品推荐
.pro-rec{
    width: 1001px;
//  height: 375px;
    margin: 69px auto 0 auto;
    
    //  产品轮播
    .pro-banner{
        width: 100%;
        height: 288px;
        margin-top: 68px;
//      position: relative;
        .left-w{
            margin-top: 117px;
            cursor: pointer;
            img{
                width:16px;
                height: 51px;
//              margin-top: 17px;
//              margin-left: 5px;
            }
        }
        .right-w{
            margin-top: 117px;
            cursor: pointer;
        }
    }
    .pro-cell1{
        margin-left: 96px;
        position: relative;
        height: 100%;
        .img-warp{
            img{
                width: 176px;
                height: 206px;
            }
        }
        p:first-of-type{
            position: absolute;
            width: 100%;
            bottom: 24px;
            height: 14px;
            left: 0;
            font-size: 15px;
            color: $fontcolor;
            text-align: center;
        }
        p:nth-of-type(2){
            color: #99999a;
            text-align: center;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 11px;
            font-size: 11px;
            position: absolute;
        }
        
    }
    
    .pro-cell2{
        margin-left: 53px;
        position: relative;
        height: 100%;
        .img-warp{
            img{
                width: 152px;
                height: 209px;
            }
        }
        p:first-of-type{
            position: absolute;
            width: 100%;
            bottom: 24px;
            height: 14px;
            left: 0;
            font-size: 15px;
            color: $fontcolor;
            text-align: center;
        }
        p:nth-of-type(2){
            color: #99999a;
            text-align: center;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 11px;
            font-size: 11px;
            position: absolute;
        }
        
    }
    
    .pro-cell3{
        margin-left: 69px;
        position: relative;
        height: 100%;
        .img-warp{
            img{
                width: 119px;
                height: 206px;
            }
        }
        p:first-of-type{
            position: absolute;
            width: 100%;
            bottom: 24px;
            height: 15px;
            left: 0;
            font-size: 14px;
            color: $fontcolor;
            text-align: center;
        }
        p:nth-of-type(2){
            color: #99999a;
            text-align: center;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 11px;
            font-size: 11px;
            position: absolute;
        }
        
    }
    
    .pro-cell4{
        margin-left: 69px;
        position: relative;
        height: 100%;
        .img-warp{
            img{
                width: 121px;
                height: 201px;
            }
        }
        p:first-of-type{
            position: absolute;
            width: 100%;
            bottom: 24px;
            height: 15px;
            left: 0;
            font-size: 14px;
            color: $fontcolor;
            text-align: center;
        }
        p:nth-of-type(2){
            color: #99999a;
            text-align: center;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 11px;
            font-size: 11px;
            position: absolute;
        }
        
    }
    
    
    
    
}

.new{
    width: 100%;
//  height: 130px;
    margin-top: 68px;
    img{
        width: 1366px;
        height: 130px;
    }
}


//定制骑手服
.cell-warp{
    position: relative;
    
}
.cellclick{
    position: absolute;
}
.cellclickcell{
    opacity: 0.4;
    background-color: #e99698;
    width: 71px;
    height: 17px;
    margin-top: 5px;
    &:hover{
        opacity: 0.6;
    }
    a{
        color: white;
        width: 100%;
        height: 100%;
        display: block;
    }
}
.bigtitle{
    position: absolute;
    top: 33px;
    left: 22px;
    height: 28px;
    font-size: 28px;
}
.cellclickcell{
    width: 65px;
    height: 17px;
    float: left;
    padding-left: 6px;
    color: white;
    font-size: 11px;
    line-height: 17px;
    
}

.ride{
    width: 1003px;
//  height: 525px;
//  background-color: black;
    margin: 68px auto 0 auto;
    .content{
        margin: 38px auto 0 auto;
        width: 100%;
//      height: 452px;
//      background-color: black;
            .fenlei{
                width: 399px;
//              height: 452px;
//              background-color: black;
//上衣
                .shangyi{
                    img{
                        width: 399px;
                        height: 223px;
                        
                    }
                    .shangyibt{
                        color: white;
                    }
                    .shangyick{
                            width: 147px;
//                          height: 83px;
                            top: 114px;
                            left: 23px;
                            
//                          background-color: black;
                            .shangyickc{
                                margin-right: 5px;
                                
                                &:nth-of-type(2n){
                                    margin-right: 0;
                                }
                                &:nth-of-type(1),&:nth-of-type(2){
                                    margin-top: 0;
                                }
                            }
                        }
                    
                    
                }
//              裤子
                .pan{
                    margin-top: 5px;
                    position: relative;
                    img{
                        width: 197px;
                        height: 224px;
                    }
                    .panbt{
                        color: white;
                    }
                    .panck{
                        top: 74px;
                        left: 22px;
//                      background-color: black;
                        width: 71px;
                        .panckc{
                            background-color: #27a84c;
                            &:first-of-type{
                                margin-top: 0;
                            }
                        }
                    }
                    
                    
                    
                }
                
//              套装
                .suit{
                   margin-top: 5px;
                   margin-left: 5px;
                   position: relative;
                   img{
                       width: 197px;
                       height: 224px;
                   }
                   .suitbt{
                       color: white;
                   }
                    
                }
                
                
                
            }
            
//          衣服板块
//          衣服板块
            .rideclothes{
                width: 594px;
//              height: 452px;
//              background-color: black;
                margin-left: 10px;
                
                
                
            }
            
    }
}

//跑步服
.runclothes{
    width: 1003px;
//  height: 297px;
    margin: 67px auto 0 auto;
//  background-color: black;
    .content{
        width: 100%;
        margin-top: 54px;
        .pan{
            width: 399px;
//          男装
            .man{
                position: relative;
                .runbt{
                    color: black;
//                  font-size: 29px;
                }
                .runck{
                    position: absolute;
                    top: 74px;
                        left: 22px;
//                      background-color: black;
                        width: 71px;
                        .runckc{
                            background-color: #37a9b9;
                            &:first-of-type{
                                margin-top: 0;
                                a{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                }
            }
//          男装
//          女装
            .girl{
                position: relative;
                margin-left: 5px;
                .runbt{
                    color: black;
//                  font-size: 29px;
                }
                .runck{
                    position: absolute;
                    top: 74px;
                        left: 22px;
//                      background-color: black;
                        width: 71px;
                        .runckc{
                            background-color: #e39287;
                            &:first-of-type{
                                margin-top: 0;
                                a{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                }
            }
//          女装
        }
        
        .clothes{
                width: 594px;
//              height: 452px;
//              background-color: black;
                margin-left: 10px;
                
                
                
            }
    }
}


//铁三服
.ironclothes{
    width: 1003px;
//  height: 297px;
    margin: 67px auto 0 auto;
//  background-color: black;
    .content{
        width: 100%;
        margin-top: 54px;
        .pan{
            width: 399px;
//          男装
            .man{
                position: relative;
                .ironbt{
                    color: black;
//                  font-size: 29px;
                }
                .ironck{
                    position: absolute;
                    top: 74px;
                        left: 22px;
//                      background-color: black;
                        width: 71px;
                        .ironckc{
                            background-color: #d23d3d;
                            &:first-of-type{
                                margin-top: 0;
                                a{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                }
            }
//          男装
//          女装
            .girl{
                position: relative;
                margin-left: 5px;
                .ironbt{
                    color: white;
//                  font-size: 29px;
                }
                .ironck{
                    position: absolute;
                    top: 74px;
                        left: 22px;
//                      background-color: black;
                        width: 71px;
                        .ironckc{
                            background-color: #296788;
                            &:first-of-type{
                                margin-top: 0;
                                a{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                }
            }
//          女装
        }
        
        .clothes{
                width: 594px;
//              height: 452px;
//              background-color: black;
                margin-left: 10px;
                
                
                
            }
    }
}

//定制休闲服
.relax{
    margin: 68px auto 0 auto;
    width: 1001px;
//  height: 451px;
//  background-color: black;
    .content{
        width: 100%;
        margin-top: 49px;
        .warp{
//          border: 1px solid $basecolor;
//          width: 249px;
            img{
                width: 249px;
                height: 381px;
                display: block;
            }
            
        }
        .warp1{
            border: 1px solid $basecolor;
        }
        .warp2{
            border-top: 1px solid $basecolor;
            border-right: 1px solid $basecolor;
            border-bottom: 1px solid $basecolor;
        }
        .warp3{
            border-top: 1px solid $basecolor;
            border-right: 1px solid $basecolor;
            border-bottom: 1px solid $basecolor;
        }
        .warp4{
            border-top: 1px solid $basecolor;
            border-right: 1px solid $basecolor;
            border-bottom: 1px solid $basecolor;
//          width: 249px;
            img{
                width: 249px;
                height: 190px;
                display: block;
                &:first-of-type{
                    border-bottom: 1px solid $basecolor;
                }
            }
        }
    }
}

//品牌专区
.brand{
    width: 1000px;
//  height: 408px;
    margin : 68px auto 0 auto;
//  background-color: black;
    .content{
        margin-top: 54px;
        width: 100%;
        .sentic{
            position: relative;
//          width: 332px;
            border-top: 1px solid $basecolor;
            border-left: 1px solid $basecolor;
            border-bottom: 1px solid $basecolor;
            .swarp{
                display: block;
                    width: 332px;
                    height: 100%;
                    background-color: black;
                    opacity: 0.85;
                    position: absolute;
                    top: 0;
                    left: 0;
            }
//          &::after{
//                  content: "";
//                  display: block;
//                  width: 332px;
//                  height: 100%;
//                  background-color: black;
//                  opacity: 0.85;
//                  position: absolute;
//                  top: 0;
//                  left: 0;
//              }
            img{
                width: 332px;
                height: 333px;
                display: block;
                position: relative;
                
                
            }
            
            .logo{
                position: absolute;
                top: -1px;
                left: 28px;
                img{
                    width: 70px;
                    height: 69px;
                }
                
            }
            p{
                position: absolute;
                width: 280px;
                top: 102px;
                left: 26px;
                line-height: 21px;
                font-size: 14px;
                color: white;
                text-align: justify;
            }
            .more{
                position: absolute;
                width: 76px;
                height: 20px;
                border-radius: 10px;
                background-color: #eb413d;
                color: white;
                font-size: 11px;
                line-height: 20px;
                text-align: center;
                bottom: 50px;
                left: 28px;
            }
            
            
        }
        
        .right{
            width: 666px;
            .beats{
                border-top: 1px solid $basecolor;
                border-right: 1px solid $basecolor;
                img{
                    width: 332px;
                    height: 166px;
                    display: block
                }
            }
            .vans{
                border-top: 1px solid $basecolor;
                border-right: 1px solid $basecolor;
//              margin-bottom: 1px solid $basecolor;
                img{
                    width: 332px;
                    height: 166px;
                    display: block;
                }
            }
            .nike{
                border-top: 1px solid $basecolor;
                border-right: 1px solid $basecolor;
                margin-bottom: 1px solid $basecolor;
                img{
                    width: 332px;
                    height: 166px;
                    display: block;
                }
            }
            .ape{
                border-top: 1px solid $basecolor;
                border-right: 1px solid $basecolor;
                margin-bottom: 1px solid $basecolor;
                img{
                    width: 332px;
                    height: 166px;
                    display: block;
                }
            }
        }
    }
    
}
